﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>QFocuser</title>
    <style type='text/css'>
        body
        {
            font-family: Verdana;
            font-size: 11px;
        }
        h1
        {
            font-size: 16px;
        }
        h2
        {
            font-size: 12px;
        }
        .widget
        {
            width: 300px;
            margin: 10px;
            padding: 4px;
            background-color: #eee;
            border: solid 1px #ccc;
        }
        .row
        {
            background-color: #ddd;
            border: solid 1px #bbb;
            margin: 1px;
            padding: 2px 5px;
        }
        .row-focused
        {
            background-color: #F8EBDA;
        }
        .widget-focused
        {
            border: solid 1px #888;
        }
        input
        {
            width: 200px;
            color: #777;
            margin-left: 10px;
        }
    </style>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js'></script>

    <script type='text/javascript' src='Source/QFocuser.js'></script>

    <script type='text/javascript'>

        window.addEvent('domready', function() {

            var widget = $('widget');

            var focuser = new QFocuser(widget, {
                tabindex: 0,
                onWidgetFocus: function() {
                    widget.addClass('widget-focused');
                    $('log').innerHTML += ' widget focused<br />';
                    if (!focuser.getFocused()) focuser.focus(widget.getElement('.row'));
                },
                onWidgetBlur: function() {
                    widget.removeClass('widget-focused');
                    $('log').innerHTML += ' widget blured<br />';
                },
                onFocus: function(el) {
                    $(el).addClass('row-focused');
                    $('log').innerHTML += el.get('text') + ' focused<br />';
                },
                onBlur: function(el) {
                    $(el).removeClass('row-focused');
                    $('log').innerHTML += el.get('text') + ' blured<br />';
                }
            });

            // example how to get focus on some widget element
            widget.addEvents({
                mousedown: function(e) {
                    var target = $(e.target),
                        row = target.hasClass('row') ? target : target.getParent('.row');
                    // use focuser to set focus
                    if (row) focuser.focus(row);
                },
                dblclick: function(e) {
                    var target = $(e.target),
                        row = target.hasClass('row') ? target : target.getParent('.row');
                    if (row) {
                        $(e.target).dispose();
                        focuser.refresh();   
                    }                    
                }
            });

            // exaple of key navigation on widget
            $(focuser.getKeyListener()).addEvents({
                keydown: function(e) {
                    if (['up', 'down'].contains(e.key)) {
                        e.stop(); // to prevent browser scrolling                    
                        var rows = $('widget').getElements('div'),
                            idx = rows.indexOf(focuser.getFocused())
                        idx += (e.key == 'up' ? -1 : 1);
                        idx = idx.limit(0, rows.length - 1);
                        focuser.focus(rows[idx]);
                    }
                }
            });

        });
            
    </script>

</head>
<body>
    <h1>QFocuser 0.95 - class for keyboard navigable AJAX widgets for better usability and
        accessability</h1>
    <h2>Features</h2>
    <ul>
        <li>allow to your widget to listen key events when its focused</li>
        <li>focus can be enabled on any element</li>
        <li>fires focus and blur events (so your table row will NOT remain highlighted after
            click out of table for example)</li>
        <li>make your widget to be accessible by tab key</li>
        <li>tiny and library agnostic</li>
        <li>Works also in Safari!</li>
    </ul>
    <p>Click to input, then press tab.</p>
    <input type='text' value='I am here to see tab is working' />
    <p>Click to row, then press arrow up or down. Try to click out of current active element,
        to see focus is lost.</p>
    <div id='widget' class='widget'>
        <h2>Widget</h2>
        <div class='row'>
            <strong>row 1</strong></div>
        <div class='row'>
            <strong>row 2</strong></div>
        <div class='row'>
            <strong>row 3</strong></div>
    </div>
    <input type='text' id='tester' value='I am here to see tab is working' />
    <p id='log'></p>
</body>
</html>
